<template>
  <div class="chat-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="小智同学"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <!-- /导航栏 -->

    <!-- 消息列表 -->
    <div class="message-list" ref="message-list">
      <div
        class="message-item"
        :class="{ reverse: item.userId === user.user_id }"
        v-for="(item, index) in messages"
        :key="index"
      >
        <van-image class="avatar" round fit="cover" :src="item.photo" />
        <div class="msg-wrap" style="flex: 1">
          <div class="title">{{ item.msg }}</div>
        </div>
      </div>
    </div>
    <!-- /消息列表 -->

    <!-- 发送消息 -->
    <van-cell-group class="send-message-wrap">
      <van-field v-model="message" center clearable placeholder="请说批话">
        <van-button slot="button" size="small" type="primary" @click="onSend"
          >发送</van-button
        >
      </van-field>
    </van-cell-group>
    <!-- /发送消息 -->
  </div>
</template>

<script>
import io from 'socket.io-client'
// 建立连接
const socket = io('http://ttapi.research.itcast.cn')

window.socket = socket
// 发送消息
// socket.emit()

// 接收消息

export default {
  name: 'ChatPage',
  data() {
    return { message: '' }
  },
  computed: {},
  watch: {},
  created() {
    socket.on('connect', function () {
      console.log('连接建立成功了')
    })
    // 断开连接了
    socket.on('disconnect', function () {
      console.log('断开了')
    })
  },
  mounted() {},
  methods: {},
}
</script>

<style scoped lang="less">
.message-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 44px;
  overflow-y: auto;
}
.send-message-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 0 14px;
  align-items: center;
}
</style>
